import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import WaterfallCom from '../../components/waterfall-com/waterfall-com'
import SearchbarCom from "../../components/searchbar-com/searchbar-com";

import { post } from "../../api/fetch"
import './hotsearch.scss'

@inject('Store')
@observer

class HotSearch extends Component {
  constructor(props) {
    super(props)
    this.state ={
      // keywords: '',
      searchFlag: false,
      total: 0,
      actionName: '搜索'
    }
  }
  componentDidMount() {
    this.props.Store.getHotwords();
  }
  componentWillUnmount() {
    this.props.Store.clearKeywords();
  }
  config = {
    navigationBarTitleText:'搜索'
  }
  handleSearch = (value) =>{
    this.props.Store.setKeywords(value)
    this.setState({
      actionName: '',
      searchFlag: true
    })
  }
  handleTotal(date){
    // console.log(data)
    this.setState({
      total:date
    })
  }
  handleClear () {
    this.props.Store.clearKeywords();
    this.setState({
      actionName: '搜索',
      searchFlag: false
    })
  }
  render() {
    let array=Array.from(this.props.Store.hotwords)
    let {keywords} = this.props.Store
    let {searchFlag, total, actionName} = this.state
    return (
      <View className='hotlist-wrap'>
        <View class="search">
          <SearchbarCom 
            keywords={keywords}
            actionName={actionName}
            onSearch={this.handleSearch.bind(this)} 
            placeholder={array[0]}
            onClear={this.handleClear.bind(this)}
          />
        </View>
        {!searchFlag && 
        <View className='hotwords-list'>
          {array.map((item)=>{
            return <View className='hotwords-item' key={item} >
              <Text onClick={this.handleSearch.bind(this, item)}>{item}</Text>
            </View>
          })}
        </View>}
        {searchFlag && 
        <View className='result-content'>
          {/* <View className='total-info'>
            <Text>{total}篇笔记</Text>
          </View> */}
          <View className='search-list'>
            <WaterfallCom keywords={keywords} onTotal={this.handleTotal.bind(this)}/>
          </View>
        </View>}
        
      </View>
    )
  }
}

export default HotSearch
